<template>
	<!-- 我的页面 -->
	<view class="mine-container">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="mine-img-seat">
				<view v-if="!userInFo.avatar" class="avatar">
					<image class="avatar-img" src="@/static/TheChartsImgae/实心.png" mode="aspectFill"></image>
				</view>
				<!-- 头像 -->
				<view v-if="userInFo.avatar" class="avatar" @click="handleToInfo">
					<image :src="imgUrl+userInFo.avatar||'@/static/TheChartsImgae/实心.png'" mode="aspectFill" class="avatar-img"></image>
				</view>
				<view class="login-tip">
					<!-- 点击登录 -->
					<button v-if="!userInFo.nickname" class="login" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" @click="handleToLogin">
						{{userInFo.nickname?userInFo.nickname:"点击授权登录"}}
					</button>
					<button v-if="userInFo.nickname" class="login" @click="handleToInfo">
						{{userInFo.nickname?userInFo.nickname+' >':""}}
					</button>
					<view class="button-group" v-if="userInFo.nickname">
						<uni-tag type="success" text="等级Lv3" @click="toGrade"></uni-tag>
						<uni-tag class="statusInfo" :text="userInFo.status==2?'空闲':userInFo.status==3?'繁忙':'待定'"
							:type="userInFo.status==2?'success':userInFo.status==3?'error':'primary'"
							@click="changeState()">+{{}}</uni-tag>
						<view class="changeState" v-if="isShowState">
							<uni-tag text="空闲" type="success" @click="selectStatus(2)"></uni-tag>
							<uni-tag text="待定" type="primary" @click="selectStatus(1)"></uni-tag>
							<uni-tag text="繁忙" type="error" @click="selectStatus(3)"></uni-tag>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的活动 -->
		<view class="my-activity">
			<!-- 上面盒子 -->
			<view class="my-activity-up">
				<view class="my-activity-up-left">
					我的活动
				</view>
				<view class="my-activity-up-right" @click="handleToMyActivity">
					全部活动
					<uni-icons type="forward"></uni-icons>
				</view>
			</view>
			<!-- 下面盒子 -->
			<view class="my-activity-down">
				<!-- 每项盒子 -->
				<view @click="changePage(item.id)" class="my-activity-down-item" v-for="(item,i) in myActivity"
					:key="item.id">
					<image class="image" :src="item.image" mode="aspectFill"></image>
					<span>{{item.title}}</span>
				</view>
			</view>
		</view>

		<!-- 服务工具 -->
		<view class="my-activity util-box">
			<!-- 上面盒子 -->
			<view class="my-activity-up">
				<view class="my-activity-up-left">
					服务工具
				</view>
			</view>
			<!-- 下面盒子 -->
			<view class="my-activity-down util">
				<!-- 每项盒子 -->
				<view @click="changePage(item.id)" class="my-activity-down-item util-item" v-for="(item,i) in serveUtil"
					:key="item.id">
					<image class="image" :src="item.image" mode="aspectFill"></image>
					<span>{{item.title}}</span>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import config from '@/config.js'
	import {
		login
	} from '@/api/login.js'
	import {
		changeMyStatus
	} from '@/api/mine/mine.js'
	export default {
		data() {
			return {
				// 个人状态
				isShowState: false,
				userInFo: {},
				nickname: '',
				imgUrl: config.imgUrl,
				version: getApp().globalData.config.appInfo.version,
				// 我的活动
				myActivity: [{
					id: 0,
					title: '待开始',
					image: '/static/images/mine/待开始.png'
				}, {
					id: 1,
					title: '进行中',
					image: '/static/images/mine/进行中.png'
				}, {
					id: 2,
					title: '已结束',
					image: '/static/images/mine/已结束.png'
				}, {
					id: 3,
					title: '退款',
					image: '/static/images/mine/退款.png'
				}],
				// 服务工具
				serveUtil: [{
					id: 4,
					title: '我的收藏',
					image: '/static/images/mine/收藏.png'
				}, {
					id: 5,
					title: '我的风采',
					image: '/static/images/mine/风采.png'
				}, {
					id: 6,
					title: '我的发布',
					image: '/static/images/mine/发布.png'
				}, {
					id: 7,
					title: '空闲时间',
					image: '/static/images/mine/空闲时间.png'
				}, {
					id: 8,
					title: '意见反馈',
					image: '/static/images/mine/意见反馈.png'
				}, {
					id: 9,
					title: '活动审核',
					image: '/static/images/mine/审核.png'
				}]
			}
		},
		onShow() {
			this.userInFo = uni.getStorageSync("userinfo") || {}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			// 跳转活跃等级页面
			toGrade() {
				this.$tab.navigateTo('/subPackages/mine/pointslevel');
			},
			// 改变个人状态
			changeState() {
				this.isShowState = !this.isShowState
			},
			// 修改个人状态
			selectStatus(index) {
				if (index) {
					changeMyStatus(index).then(
						res => {
							if (res.code == 200 && res.msg == '修改成功') {
								// 页面显示更新
								this.userInFo.status = index
								// 将最新个人状态缓存到浏览器
								let userinfo = uni.getStorageSync("userinfo")
								userinfo.status = index
								uni.setStorageSync("userinfo", userinfo)
								this.isShowState = !this.isShowState
							}
						},
						err => {
							console.log(err);
						})
				}
			},
			// 跳转我的活动或退款界面
			changePage(i) {
				switch (i) {
					// 跳转我的活动页面(传入活动状态id)
					case 0:
						;
					case 1:
						;
					case 2:
						this.$tab.navigateTo(`/subPackages/mine/myActivity?typeIndex=${i}`);
						break;
						// 跳转退款页面
					case 3:
						this.$tab.navigateTo('/subPackages/mine/refund');
						break;
						// 我的收藏
					case 4:
						this.$tab.navigateTo('/subPackages/mine/myCollect');
						break;
						// 我的风采 
					case 5:
						this.$tab.navigateTo('/subPackages/mine/myMien');
						break;
						// 我的发布
					case 6:
						this.$tab.navigateTo('/subPackages/mine/myPublish');
						break;
						// 空闲时间
					case 7:
						this.$tab.navigateTo('/subPackages/mine/timeFiltering');
						break;
						// 意见反馈
					case 8:
						this.$tab.navigateTo('/subPackages/CustomerService/index/index');
						break;
						// 活动审核
					case 9:
						this.$tab.navigateTo('/subPackages/MyClub/ClubAuth/AuditActivities');
						break;
				}
			},
			// 跳转我的活动页面
			handleToMyActivity() {
				this.$tab.navigateTo('/subPackages/mine/myActivity')
			},
			// 跳转我的信息页面
			handleToInfo() {
				this.$tab.navigateTo('/subPackages/mine/myInfo')
			},
			// 获取登录code
			handleToLogin() {
				this.nickname = 'Candy'
				uni.login({
					provider: 'weixin',
					success: (res) => {
						// 成功获取code后登录
						login(res.code).then(
							res => {
								// 登录成功将token存储到浏览器
								uni.setStorageSync('token', res.data.token)
								if (res.data.phone) {
									return
								}
							},
							err => {}
						)
					},
					fail: (res) => {
						console.log("登录失败", res)
						uni.reLaunch({
							url: '/pages/mine/index'
						})
					}
				})
			},
			// 拿去电话code
			getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$store.dispatch('empowerPhone', e.detail.code).then((res) => {
						if (res.code == 200) {
							uni.reLaunch({
								url: '/pages/mine/index'
							})
						}
					})
				} else {
					uni.clearStorage('userinfo')
					this.$modal.showToast("登录失败")
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		height: 100vh;
	}

	// 头像和昵称位置
	.mine-img-seat {
		position: relative;
		height: 270rpx;
		display: flex;
		align-items: center;
		margin-left: 20px;
		z-index: 0;

		// 默认头像框
		.avatar {
			width: 132rpx;
			height: 132rpx;
			border-radius: 50%;
			box-sizing: content-box;

			.avatar-img {
				width: 132rpx;
				height: 132rpx;
				border-radius: 50%;
				border: 1px solid #BBB;
			}
		}

	}

	.mine-name-revise {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.mine-name-input {
			width: 160rpx;
			border-left: none;
			border-radius: 10rpx;
			border: 2rpx solid #999999;
		}

		.mine-name-btn {
			margin: 0;
			width: 110rpx;
			height: 50rpx;
			line-height: 50rpx;
			border: none;
			font-size: 24rpx;
			text-align: center;
		}
	}


	// 我的活动
	.my-activity {
		width: 720rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border: 1px solid #bbb;

		// 上边盒子
		.my-activity-up {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 30rpx;
			align-items: center;

			.my-activity-up-left {
				font-size: 18px;
				font-weight: bold;
			}

			.my-activity-up-right {
				font-size: 16px;
			}
		}

		// 下边盒子
		.my-activity-down {
			display: flex;
			justify-content: space-evenly;

			.my-activity-down-item {
				width: 108rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;

				.image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}


	}

	// 服务工具
	.util-box {
		height: 550rpx;
		justify-content: flex-start;
		margin-top: 20rpx;

		.util {
			flex-wrap: wrap;
			justify-content: flex-start;

			.util-item {
				height: 150rpx;
				width: calc(100% / 4);
				min-width: calc(100% / 4); // 加入这两个后每个item的宽度就生效了
				max-width: calc(100% / 4); // 加入这两个后每个item的宽度就生效了
			}
		}
	}


	.mine-container {
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;

		.header-section {
			color: black;

			.login-tip {
				font-size: 16px;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: start;
				margin-left: 20px;
			}

		}

		.user-info {
			position: absolute;
			top: 160rpx;
			display: flex;
			align-items: center;

			.user_name {
				width: 400rpx;
				text-align: center;
			}

			.u_title {
				font-size: 20px;
				line-height: 30px;

			}


		}
	}

	.content-section {
		position: relative;
		top: -50px;

		.mine-actions {
			margin: 15px 15px;
			padding: 20px 0px;
			border-radius: 8px;
			background-color: white;

			.action-item {
				.icon {
					font-size: 28px;
				}

				.text {
					display: block;
					font-size: 13px;
					margin: 8px 0px;
				}
			}
		}
	}

	// 取消登录button默认样式
	.login {
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: none;
		background-color: transparent;
	}

	// 按钮组
	.button-group {
		display: flex;
		position: relative;

		.uni-tag {
			display: block;
			text-align: center;
			line-height: 16px;
			width: 60px;
			border-radius: 5px;
			font-weight: bold;
		}

		.statusInfo {
			margin-left: 20rpx;
		}

		.changeState {
			position: absolute;
			width: 460rpx;
			height: 110rpx;
			background: white;
			left: 0;
			top: 70rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			border: 1px solid #bbb;
			border-radius: 10rpx;

			&::before {
				content: '';
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				background-color: #21ff67;
				transform: rotate(45deg);
				top: -10rpx;
				left: 200rpx;
				z-index: -1;
			}

			.uni-tag {
				display: block;
				width: 80rpx;
				text-align: center;
			}


		}
	}

	.login::after {
		border: none;
	}
</style>
